<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ModelArts自定义镜像构建工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        h1, h2 {
            color: #333;
        }
        
        .container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        select, input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        .command-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
            align-items: center;
        }
        
        .command-row input {
            flex-grow: 1;
        }
        
        .btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .btn:hover {
            background-color: #0056b3;
        }
        
        .btn-danger {
            background-color: #dc3545;
        }
        
        .btn-danger:hover {
            background-color: #bd2130;
        }
        
        .btn-success {
            background-color: #28a745;
        }
        
        .btn-success:hover {
            background-color: #218838;
        }
        
        .instructions ol, .instructions ul {
            padding-left: 20px;
        }
        
        .instructions li {
            margin-bottom: 10px;
        }
        
        .code-block {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 10px;
            font-family: monospace;
            white-space: pre-wrap;
            overflow-x: auto;
        }
        
        .highlight {
            background-color: #fff3cd;
            border-color: #ffeaa7;
        }
        
        .step {
            margin-bottom: 30px;
        }
        
        .step-title {
            background-color: #007bff;
            color: white;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <h1>ModelArts自定义镜像构建工具</h1>

    <div class="container">
        <h2>准备工作</h2>
        
        <div class="step">
            <div class="step-title">步骤1: 创建ECS虚拟机</div>
            <p>参考视频 <a href="https://bilibili.com/video/BV1hfnZzDECY" target="_blank">创建ECS虚拟机</a> (00:00 - 17:00) 创建ECS虚拟机</p>
        </div>
        
        <div class="step">
            <div class="step-title">步骤2: 创建SWR容器注册表</div>
            <p>参考视频 <a href="https://bilibili.com/video/BV1hfnZzDECY" target="_blank">创建SWR容器注册表</a> (1:10:20 - 1:13:50)</p>
        </div>
    </div>
    
    <!-- 信息收集部分 -->
    <div class="container">
        <h2>信息收集</h2>
        
        <div class="form-group">
            <label for="baseImage">选择基础镜像:</label>
            <select id="baseImage">
                <option value="swr.cn-southwest-2.myhuaweicloud.com/swr-devadv2/cann_82rc1_py311_torch26:5">swr.cn-southwest-2.myhuaweicloud.com/swr-devadv2/cann_82rc1_py311_torch26:5</option>
            </select>
            <select id="baseImage">
                <option value="swr.cn-southwest-2.myhuaweicloud.com/swr-devadv2/cann_82rc1_py311_torch26:4">swr.cn-southwest-2.myhuaweicloud.com/swr-devadv2/cann_82rc1_py311_torch26:4</option>
            </select>
        </div>
        
        <div class="form-group">
            <label>执行的自定义命令:</label>
            <div id="commandsContainer">
                <div class="command-row">
                    <input type="text" class="command-input" value="pip install matplotlib">
                    <button type="button" class="btn btn-danger" onclick="removeCommand(this)">-</button>
                </div>
            </div>
            <button type="button" class="btn btn-success" onclick="addCommand()">+</button>
        </div>
        
        <div class="form-group">
            <label for="orgName">SWR组织名:</label>
            <input type="text" id="orgName" placeholder="请输入SWR组织名">
        </div>
        
        <div class="form-group">
            <label for="imageName">镜像名:</label>
            <input type="text" id="imageName" placeholder="请输入镜像名">
        </div>
        
        <div class="form-group">
            <label for="imageVersion">镜像版本名:</label>
            <input type="text" id="imageVersion" placeholder="请输入镜像版本名">
        </div>
    </div>
    
    <!-- 操作指南部分 -->
    <div class="container">
        <h2>操作指南</h2>
        
        <div class="step">
            <div class="step-title">步骤1: 登录到SWR仓库</div>
            <p>在终端中执行以下命令登录到SWR仓库:</p>
            <div class="code-block" id="loginCommand">docker login -u cn-southwest-2@HPUAKVFSMQSLSEUEOBWD -p 83d5a1b6e034b9f6fe09072fad3983716202f32d5c627664c283a468d38571b9 swr.cn-southwest-2.myhuaweicloud.com</div>
        </div>
        
        <div class="step">
            <div class="step-title">步骤2: 拉取基础镜像</div>
            <p>执行以下命令拉取所选的基础镜像:</p>
            <div class="code-block" id="pullCommand">docker pull swr.cn-southwest-2.myhuaweicloud.com/swr-devadv2/cann_82rc1_py311_torch26:4</div>
        </div>
        
        <div class="step">
            <div class="step-title">步骤3: 登录到您的SWR容器注册表</div>
            <p>重要步骤：在SWR控制台中点击"登录指令"，复制并执行显示的登录指令。</p>
        </div>
        
        <div class="step">
            <div class="step-title">步骤4: 生成Dockerfile文件</div>
            <p>执行以下命令会在当前目录下创建Dockerfile文件:</p>
            <div class="code-block" id="generateDockerfileCommand">cat > Dockerfile << 'EOF'
FROM swr.cn-southwest-2.myhuaweicloud.com/swr-devadv2/cann_82rc1_py311_torch26:4
RUN . /home/ma-user/anaconda3/etc/profile.d/conda.sh && conda activate PyTorch-2.6.0 && pip install matplotlib
EOF</div>
            <p>注意：执行上述命令后，会在当前目录下生成Dockerfile文件，内容如上所示。</p>
        </div>
        
        <div class="step">
            <div class="step-title">步骤5: 构建并推送镜像</div>
            <p>执行以下命令构建Docker镜像并推送到SWR仓库:</p>
            <div class="code-block" id="buildPushCommands"># 构建镜像
docker build -t swr.cn-southwest-2.myhuaweicloud.com/&lt;组织名&gt;/&lt;镜像名&gt;:&lt;版本名&gt; .

# 推送镜像
docker push swr.cn-southwest-2.myhuaweicloud.com/&lt;组织名&gt;/&lt;镜像名&gt;:&lt;版本名&gt;</div>
        </div>
    </div>

    <div class="container">
        <h2>后续工作</h2>
        
        <div class="step">
            <div class="step-title">使用自定义镜像创建ModelArts Notebook</div>
            <p>参考视频 <a href="https://bilibili.com/video/BV1hfnZzDECY" target="_blank">使用自定义镜像启动ModelArts Notebook</a> (1:28:15) 创建Notebook</p>
        </div>
    </div>

    <script>
        // 添加命令输入框
        function addCommand() {
            const container = document.getElementById('commandsContainer');
            const row = document.createElement('div');
            row.className = 'command-row';
            row.innerHTML = `
                <input type="text" class="command-input" placeholder="请输入命令">
                <button type="button" class="btn btn-danger" onclick="removeCommand(this)">-</button>
            `;
            container.appendChild(row);
            updateCommands();
        }
        
        // 删除命令输入框
        function removeCommand(button) {
            const container = document.getElementById('commandsContainer');
            if (container.children.length > 1) {
                button.parentElement.remove();
            } else {
                alert('至少需要保留一个命令');
            }
            updateCommands();
        }
        
        // 更新所有动态内容
        function updateCommands() {
            // 获取所有命令
            const commandInputs = document.querySelectorAll('.command-input');
            const commands = Array.from(commandInputs).map(input => input.value).filter(cmd => cmd.trim() !== '');
            
            // 更新Dockerfile内容
            const baseImage = document.getElementById('baseImage').value;
            
            // 更新生成Dockerfile的命令
            const generateDockerfileCommand = document.getElementById('generateDockerfileCommand');
            
            if (commands.length > 0) {
                const commandsStr = commands.join(' && ');
                generateDockerfileCommand.textContent = `cat > Dockerfile << 'EOF'
FROM ${baseImage}
RUN . /home/ma-user/anaconda3/etc/profile.d/conda.sh && conda activate PyTorch-2.6.0 && ${commandsStr}
EOF`;
            } else {
                generateDockerfileCommand.textContent = `cat > Dockerfile << 'EOF'
FROM ${baseImage}
RUN . /home/ma-user/anaconda3/etc/profile.d/conda.sh && conda activate PyTorch-2.6.0
EOF`;
            }
            
            // 更新拉取命令
            const pullCommand = document.getElementById('pullCommand');
            pullCommand.textContent = `docker pull ${baseImage}`;
            
            // 更新构建和推送命令
            const orgName = document.getElementById('orgName').value || '<组织名>';
            const imageName = document.getElementById('imageName').value || '<镜像名>';
            const imageVersion = document.getElementById('imageVersion').value || '<版本名>';
            
            const buildPushCommands = document.getElementById('buildPushCommands');
            buildPushCommands.innerHTML = `# 构建镜像
docker build -t swr.cn-southwest-2.myhuaweicloud.com/${orgName}/${imageName}:${imageVersion} .

# 推送镜像
docker push swr.cn-southwest-2.myhuaweicloud.com/${orgName}/${imageName}:${imageVersion}`;
        }
        
        // 绑定事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            // 监听所有输入变化
            document.getElementById('baseImage').addEventListener('change', updateCommands);
            document.getElementById('orgName').addEventListener('input', updateCommands);
            document.getElementById('imageName').addEventListener('input', updateCommands);
            document.getElementById('imageVersion').addEventListener('input', updateCommands);
            
            const commandsContainer = document.getElementById('commandsContainer');
            commandsContainer.addEventListener('input', function(e) {
                if (e.target.classList.contains('command-input')) {
                    updateCommands();
                }
            });
            
            // 初始化显示
            updateCommands();
        });
    </script>
    
    <footer style="text-align: center; margin-top: 30px; padding: 20px; border-top: 1px solid #eee; color: #666;">
        <p>Created by <a href="https://gitcode.com/user/zhangyin_gitcode" target="_blank">zhangyin_gitcode</a> (HUAWEI Developer Advocate)</p>
        <p>Repo: <a href="https://gitcode.com/zhangyin_gitcode/modelarts-image-builder" target="_blank">https://gitcode.com/zhangyin_gitcode/modelarts-image-builder</a></p>
    </footer>
</body>
</html>